import React, { useState } from 'react';
import classNames from 'classnames';

type Tab = {
  icon: string;
  key: string;
  name: string;
  children?: React.ReactNode;
};
interface MenuTabsProps {
  tabs: Tab[];
  tabChange?: Function;
}

const MenuTabs = (props: MenuTabsProps) => {
  const { tabs, tabChange } = props;
  const [activeTab, setActiveTab] = useState(tabs[0].key);
  const onChange = (tab: string) => {
    setActiveTab(tab);
    tabChange && tabChange(tab);
  };
  return (
    <div className="rlative w100p h100p pl40">
      <div className="absolute left-0 top-0 z-1 flex flex-col w40 h100p bg-sider overflow-y-auto">
        {tabs.map((tab: Tab, i: React.Key) => {
          const isActive = tab.key === activeTab;
          return (
            <div
              key={i}
              className={classNames('pt12 pb12 tc pointer', {
                'text-color-secondary': !isActive,
                'primary-color': isActive,
              })}
              style={{
                backgroundColor: isActive ? 'rgba(77, 118, 193, .19)' : '',
              }}
              onClick={() => onChange(tab.key)}
            >
              <span className={`iconfont ${tab.icon}`}></span>
              <div>{tab.name}</div>
            </div>
          );
        })}
      </div>
      <>
        {tabs.map((tab: Tab, i: React.Key) => {
          const isActive = tab.key === activeTab;
          return (
            <React.Fragment key={i}>{isActive && tab.children}</React.Fragment>
          );
        })}
      </>
    </div>
  );
};

export default MenuTabs;
